<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
  <style>
    *{
    margin: 0;
    padding: 0;
    list-style: none;
   }
   .box{
    width: 100%;
    height: 56px;
    text-align: center;
    /* color: #fff; */
    margin-bottom: 60px;
   
  }
  
  #app ul{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    margin-bottom: 60px;
  }
  #app li{
    flex: 1;
    height: 56px;
    line-height: 56px;
    float: left;
    /* background-color: white; */
    position: relative;
    /* display: flex;
    justify-content: center;
    align-items: center; */
  }
  
    
  
  #app P{
    width: 215px;
    height: 100px;
    text-align: center;
    /* line-height: 100px; */
    position: absolute;
    left: 0;
    top: 50px;
    color: black;
  }
 
 

  .orange{
    height: 56px;
    background-color: orange;
    color: white;
  }
  .white{
    background-color: white;
    color: black;
  }
  </style>
</head>

  

<body>
  <div id="app" >
    <subject :arr="list1"></subject>


    <subject :arr="list2" ></subject>

    <subject :arr="list3" ></subject>
 </div>

 <!-- 父组件 -->
<template id="subject">
  <div class="box" >
    <ul  v-for="(items,i) in arr">
      <li v-for="(item,index) in items.list3"
       @click="acquire(item,index)" 
       :class="{ orange: change == index } "
       >
        {{item.count}}
      <my-son :arr="item" v-show="change == index"> </my-son>
    </ul>
   
    
  </div>
</template>

<!-- 子组件 -->
  <template id="son" >
    <p  >
      {{arr.count}}
      
    </p>
  </template>


    <script>
    //子组件
    const son = {
      template:'#son',
      props:{
        arr:{
          type:Array,
          //require 是否必传
          default:()=>{
            return[
              {id:0,count:"语文",  },
              {id:1,count:"数学" , },
              {id:2,count:"英语" , },
            ]
          }
        }
      }
    }

    //父组件
    const subject={
      template:'#subject',
      data() {
        return {
         change:0, 
          arr:[
           {
           change:0,
              list1:[
              {id:0,count:"语文",  },
              {id:1,count:"数学" , },
              {id:2,count:"英语" , },
            ],
            list2:[

              {id:0,count:"地理", },
              {id:1,count:"历史" , },
              {id:2,count:"政治" , },
              ],
              list3:[

              {id:0,count:"生物", },
              {id:1,count:"化学" ,},
              {id:2,count:"物理" , },
              {id:3,count:"社会" , },
              {id:4,count:"雅思" , },
              ]

           },
          ]
           
        }
      },
      //在父组件中 注册 子组件
      components:{
        "my-son":son
      },
     
      methods: {
        acquire(item,index){
          // console.log(index);
          // console.log(item);
          // console.log(item.flag);
          this.change = index;
          
         
        }
      },
    }



    new Vue({
      el:"#app",
      data() {
        return {
          
        }
      },
      components:{
        "subject" : subject
      },
      data() {
        return {
          list1:[
            {id:0,count:"语文",  },
            {id:1,count:"数学" , },
            {id:2,count:"英语" , },
          ],
         
        }
      },
    })


  </script>
</body>
</html>